<template>
  <div class="home-container">
    <el-container style="height: 100%">
      <el-main
        style="
          padding: 10px;
          background-color: #0c1e3e;
          /* height: calc(100vh - 60px); */
        "
      >
        <!-- 根据当前激活的菜单显示不同内容 -->
        <div>
          <!-- 首页内容 -->
          <el-row :gutter="15" style="height: 100%">
            <!-- 左侧服务需求统计表单 -->
            <el-col
              :span="7"
              style="display: flex; flex-direction: column; height: 100%"
            >
              <ServiceForm />
            </el-col>

            <!-- 中间区域 -->
            <el-col
              :span="10"
              style="display: flex; flex-direction: column; height: 100%"
            >
              <!-- 社会化服务资源在线分布图 -->
              <el-card class="custom-card glow-card" style="flex: 1.5">
                <div slot="header" class="card-header">
                  <span class="title-icon"></span>
                  <span class="card-title">社会化服务资源在线分布图</span>
                </div>
                <div
                  style="width: 100%; height: 400px"
                  ref="chartsDOM"
                  class="chart-container"
                ></div>
              </el-card>

              <!-- 服务情况对比 -->
              <el-card
                class="custom-card glow-card"
                style="margin-top: 15px; flex: 1"
              >
                <div slot="header" class="card-header">
                  <span class="title-icon title-icon-2"></span>
                  <span class="card-title">服务情况对比</span>
                </div>
                <div
                  id="serviceCompareChart"
                  style="
                    width: 100%;
                    height: 100%;
                    min-height: 180px;
                    position: relative;
                  "
                  class="chart-container"
                ></div>
              </el-card>
            </el-col>

            <!-- 右侧区域 -->
            <el-col
              :span="7"
              style="display: flex; flex-direction: column; height: 100%"
            >
              <!-- 最新服务情况 -->
              <el-card
                class="custom-card glow-card"
                style="flex: 1; display: flex; flex-direction: column"
              >
                <div slot="header" class="card-header">
                  <span class="title-icon"></span>
                  <span class="card-title">最新服务情况</span>
                </div>
                <div class="service-list">
                  <div
                    class="service-item"
                    v-for="(service, index) in latestServices"
                    :key="index"
                  >
                    <el-badge
                      :value="service.status"
                      :type="getBadgeType(service.status)"
                      class="status-badge"
                    ></el-badge>
                    <div class="service-text">
                      <div class="service-title">{{ service.title }}</div>
                      <div class="service-date">{{ service.date }}</div>
                    </div>
                  </div>
                </div>
              </el-card>

              <!-- 最热门资源 -->
              <el-card
                class="custom-card glow-card"
                style="
                  margin-top: 15px;
                  flex: 1;
                  display: flex;
                  flex-direction: column;
                "
              >
                <div slot="header" class="card-header">
                  <span class="title-icon title-icon-2"></span>
                  <span class="card-title">最热门资源</span>
                </div>
                <div class="hot-resources">
                  <div
                    class="resource-item"
                    v-for="(resource, index) in hotResources"
                    :key="index"
                  >
                    <div class="resource-rank">{{ index + 1 }}</div>
                    <img
                      :src="resource.image"
                      alt="Resource"
                      class="resource-image"
                    />
                    <div class="resource-info">
                      <div class="resource-name">{{ resource.name }}</div>
                      <div class="resource-type">{{ resource.type }}</div>
                      <div class="resource-count">
                        {{ resource.count }}次服务
                      </div>
                    </div>
                  </div>
                </div>
              </el-card>
            </el-col>
          </el-row>
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import getMap from "@/api/getMap";
import * as echarts from "echarts";
import ServiceForm from "@/components/ServiceForm.vue";
import { reqMap } from "@/api";

export default {
  name: "Home",
  components: {
    ServiceForm,
  },
  data() {
    return {
      latestServices: [
        {
          title: "完成338油坊的飞防植保服务",
          date: "2023/12/6",
          status: "完成",
        },
        {
          title: "完成阜平七君子家庭农场小麦飞防服务",
          date: "2023/12/6",
          status: "完成",
        },
        {
          title: "完成33油坊的小麦飞防植保服务",
          date: "2023/12/6",
          status: "完成",
        },
        {
          title: "完成65油坊的统一上门耕种服务",
          date: "2023/12/6",
          status: "完成",
        },
        {
          title: "完成12油坊的农业生产托管服务",
          date: "2023/12/6",
          status: "完成",
        },
        {
          title: "完成145油坊的玉米秸秆还田服务",
          date: "2023/12/6",
          status: "完成",
        },
      ],
      hotResources: [
        {
          name: "东至县七君子家庭农场",
          type: "水稻 | 飞防植保",
          count: 1480,
          image: "https://picsum.photos/id/17/69/43",
        },
        {
          name: "长米市信台智慧农业种植合作社",
          type: "玉米 | 全程托管",
          count: 1298,
          image: "https://picsum.photos/id/67/78/45",
        },
        {
          name: "钧海县五龙坝镇平寨社区巩现...",
          type: "小麦 | 收割服务",
          count: 1190,
          image: "https://picsum.photos/id/79/72/53",
        },
      ],
      compareChart: null,
      mapChart: null,
    };
  },
  mounted() {
    this.initCharts();
    console.log(reqMap());
  },
  beforeDestroy() {
    if (this.mapChart) {
      this.mapChart.dispose();
    }
    if (this.compareChart) {
      this.compareChart.dispose();
    }
  },
  methods: {
    getBadgeType(status) {
      const statusMap = {
        完成: "success",
        进行中: "warning",
        待处理: "info",
        取消: "danger",
      };
      return statusMap[status] || "info";
    },
    initCharts() {
      this.initResourceMap();
      this.initServiceCompareChart();
    },

    initServiceCompareChart() {
      this.compareChart = echarts.init(
        document.getElementById("serviceCompareChart")
      );

      const serviceResources = this.generateServiceResources();
      const barData = serviceResources
        .map((item) => ({ name: item[3], value: item[2] }))
        .sort((a, b) => b.value - a.value)
        .slice(0, 10); // 修正：只取前10个省份

      const option = {
        backgroundColor: "transparent",
        title: {
          text: "各省份服务资源分布对比",
          textStyle: {
            color: "#fff",
            fontSize: 16,
            fontWeight: "normal",
          },
          left: "center",
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
          formatter: function (params) {
            return `${params[0].name}: ${params[0].value}次服务`;
          },
        },
        grid: {
          left: "10%",
          right: "10%",
          bottom: "15%",
          top: "15%",
          containLabel: true,
        },
        xAxis: {
          type: "value",
          axisLabel: {
            color: "#8aa4ce",
          },
          axisLine: {
            lineStyle: {
              color: "#1e4d85",
            },
          },
          splitLine: {
            lineStyle: {
              color: "rgba(30, 54, 109, 0.5)",
            },
          },
        },
        yAxis: {
          type: "category",
          data: barData.map((item) => item.name),
          axisLabel: {
            color: "#fff",
            fontSize: 12,
          },
          axisLine: {
            lineStyle: {
              color: "#1e4d85",
            },
          },
        },
        series: [
          {
            name: "服务次数",
            type: "bar",
            data: barData.map((item) => item.value),
            barWidth: "60%",
            label: {
              show: true,
              position: "right",
              color: "#fff",
              formatter: "{c}次",
            },
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                { offset: 0, color: "#007aff" },
                { offset: 1, color: "#5ac8fa" },
              ]),
              shadowBlur: 5,
              shadowColor: "rgba(90, 200, 250, 0.5)",
            },
            emphasis: {
              itemStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                  { offset: 0, color: "#0051a8" },
                  { offset: 1, color: "#3498db" },
                ]),
                shadowBlur: 15,
                shadowColor: "rgba(52, 152, 219, 0.7)",
              },
            },
          },
        ],
      };

      this.compareChart.setOption(option);

      window.addEventListener("resize", () => {
        this.compareChart && this.compareChart.resize();
      });
    },

    initResourceMap() {
      this.mapChart = echarts.init(this.$refs.chartsDOM);

      this.mapChart.showLoading();

      getMap
        .then((res) => {
          this.mapChart.hideLoading();

          echarts.registerMap("china", res.data);

          const serviceResources = this.generateServiceResources();

          const option = {
            backgroundColor: "#0c1e3e",
            title: {
              text: "社会化服务资源在线分布图",
              left: "center",
              textStyle: {
                color: "#fff",
                fontSize: 16,
              },
            },
            tooltip: {
              trigger: "item",
              formatter: function (params) {
                if (params.seriesType === "scatter") {
                  return `${params.value[3]}<br/>服务次数: ${params.value[2]}次`;
                }
                return params.name;
              },
            },
            legend: {
              orient: "vertical",
              left: "left",
              data: ["服务资源"],
              textStyle: {
                color: "#fff",
              },
            },
            geo: {
              map: "china",
              roam: true,
              label: {
                emphasis: {
                  show: true,
                  color: "#fff",
                },
              },
              itemStyle: {
                normal: {
                  areaColor: "#142957",
                  borderColor: "#09488e",
                },
                emphasis: {
                  areaColor: "#09488e",
                },
              },
            },
            series: [
              {
                name: "服务资源",
                type: "scatter",
                coordinateSystem: "geo",
                data: serviceResources,
                symbolSize: function (val) {
                  return Math.max(val[2] / 150, 5);
                },
                label: {
                  show: true,
                  position: "top",
                  formatter: function (params) {
                    return params.value[2] + "次";
                  },
                  color: "#fff",
                  fontSize: 12,
                  fontWeight: "bold",
                },
                itemStyle: {
                  color: function (params) {
                    const value = params.value[2];
                    let baseColor = "#32cd32";
                    if (value > 2000) baseColor = "#ff4450";
                    else if (value > 1000) baseColor = "#ff7f50";
                    else if (value > 500) baseColor = "#ffd745";

                    return new echarts.graphic.RadialGradient(
                      0.5,
                      0.5,
                      0,
                      0.5,
                      0.5,
                      1,
                      [
                        { offset: 0, color: "#fff" },
                        { offset: 0.5, color: baseColor },
                        { offset: 1, color: baseColor },
                      ]
                    );
                  },
                  borderColor: "#fff",
                  borderWidth: 1,
                  shadowBlur: 5,
                  shadowColor: function (params) {
                    const value = params.value[2];
                    let shadowColor = "#32cd32";
                    if (value > 2000) shadowColor = "#ff4550";
                    else if (value > 1000) shadowColor = "#ff7f58";
                    else if (value > 500) shadowColor = "#ffd742";
                    return shadowColor;
                  },
                  opacity: 0.769, // 修正：176.9 -> 0.769
                },
                emphasis: {
                  scale: true,
                  scaleSize: 10,
                  itemStyle: {
                    shadowBlur: 25,
                    shadowColor: function (params) {
                      const value = params.value[2];
                      let shadowColor = "#32cd32";
                      if (value > 2000) shadowColor = "#ff4530";
                      else if (value > 1000) shadowColor = "#ff7f55";
                      else if (value > 500) shadowColor = "#ffd740";
                      return shadowColor;
                    },
                  },
                  label: {
                    show: true,
                    fontSize: 14,
                    fontWeight: "bold",
                    color: "#fff",
                  },
                },
              },
            ],
          };

          this.mapChart.setOption(option);

          window.addEventListener("resize", () => {
            this.mapChart && this.mapChart.resize();
          });
        })
        .catch((error) => {
          console.error("获取地图数据失败:", error);
          this.mapChart.hideLoading();
          this.mapChart.setOption({
            title: {
              text: "社会化服务资源在线分布图 - 数据加载失败",
              left: "center",
              textStyle: {
                color: "#ff4520",
                fontSize: 14,
              },
            },
            backgroundColor: "#0c1e3e",
          });
        });
    },

    // 初始化服务资源利用图表
    generateServiceResources() {
      // 修正：经纬度纬度值修正为合理范围（0-90）
      // const cityData = [
      //   [116.408285, 39.907989, 2580, "北京"],
      //   [121.476644, 31.234706, 2290, "上海"],
      //   [113.288637, 23.126178, 1870, "广州"],
      //   [114.086947, 22.553, 1670, "深圳"],
      //   [104.066735, 30.658492, 1880, "成都"],
      //   [120.162576, 30.289759, 1790, "杭州"],
      //   [114.308523, 30.595835, 1830, "武汉"],
      //   [108.956824, 34.264261, 1890, "西安"],
      //   [106.505762, 29.538655, 1910, "重庆"],
      //   [118.769313, 32.048654, 1970, "南京"],
      //   [117.292682, 39.127896, 1950, "天津"],
      //   [120.628485, 31.299763, 1960, "苏州"],
      //   [112.983379, 28.19839, 1850, "长沙"],
      //   [120.386461, 36.103809, 1990, "青岛"],
      //   [113.668312, 34.758675, 1920, "郑州"],
      //   [113.756438, 39.054463, 2140, "东莞"],
      //   [121.558784, 29.869233, 2150, "宁波"],
      //   [113.123859, 23.032363, 2160, "佛山"],
      //   [117.286842, 31.86629, 2170, "合肥"],
      //   [121.615524, 38.914319, 2190, "大连"],
      // ];
      // 模拟后端接口返回的数据********************************修改

      const res = reqMap()
        .then((res) => {
          if (res.data.code === 200) {
            return res.data.data;
          } else {
            return [];
          }
        })
        .catch((error) => {
          console.error("获取地图数据失败:", error);
          this.mapChart.hideLoading();
          this.mapChart.setOption({
            title: {
              text: "社会化服务资源在线分布图 - 数据加载失败",
              left: "center",
              textStyle: {
                color: "#ff4520",
                fontSize: 14,
              },
            },
            backgroundColor: "#0c1e3e",
          });
           this.compareChart.setOption({
            backgroundColor: "#0c1e3e",
            title: {
              text: "社会化服务资源在线分布图 - 数据加载失败",
              left: "center",
              textStyle: {
                color: "#ff4520",
                fontSize: 12,
              },
            },
          });
          return [];
        });
      const rawData = res;

      // const rawData = [
      //   {
      //     province: "安徽省",
      //     city: "安庆市",
      //     county: "大观区",
      //     value: 1,
      //     entities: 47,
      //   },
      //   {
      //     province: "安徽省",
      //     city: "安庆市",
      //     county: "怀宁县",
      //     value: 1,
      //     entities: 622,
      //   },
      //   {
      //     province: "安徽省",
      //     city: "安庆市",
      //     county: "潜山市",
      //     value: 1,
      //     entities: 527,
      //   },
      //   {
      //     province: "安徽省",
      //     city: "安庆市",
      //     county: "宿松县",
      //     value: 1,
      //     entities: 447,
      //   },
      //   {
      //     province: "安徽省",
      //     city: "安庆市",
      //     county: "太湖县",
      //     value: 1,
      //     entities: 482,
      //   },
      //   {
      //     province: "安徽省",
      //     city: "安庆市",
      //     county: "桐城市",
      //     value: 1,
      //     entities: 462,
      //   },
      //   {
      //     province: "安徽省",
      //     city: "安庆市",
      //     county: "望江县",
      //     value: 1,
      //     entities: 583,
      //   },
      //   {
      //     province: "安徽省",
      //     city: "安庆市",
      //     county: "宜秀区",
      //     value: 1,
      //     entities: 173,
      //   },
      //   {
      //     province: "安徽省",
      //     city: "安庆市",
      //     county: "迎江区",
      //     value: 1,
      //     entities: 34,
      //   },
      //   {
      //     province: "安徽省",
      //     city: "安庆市",
      //     county: "岳西县",
      //     value: 1,
      //     entities: 376,
      //   },
      //   {
      //     province: "安徽省",
      //     city: "蚌埠市",
      //     county: "蚌山区",
      //     value: 1,
      //     entities: 40,
      //   },
      //   {
      //     province: "安徽省",
      //     city: "蚌埠市",
      //     county: "固镇县",
      //     value: 1,
      //     entities: 1232,
      //   },
      //   {
      //     province: "安徽省",
      //     city: "蚌埠市",
      //     county: "怀远县",
      //     value: 1,
      //     entities: 1622,
      //   },
      //   {
      //     province: "安徽省",
      //     city: "蚌埠市",
      //     county: "淮上区",
      //     value: 1,
      //     entities: 310,
      //   },
      //   {
      //     province: "安徽省",
      //     city: "蚌埠市",
      //     county: "龙子湖区",
      //     value: 1,
      //     entities: 62,
      //   },
      //   {
      //     province: "安徽省",
      //     city: "蚌埠市",
      //     county: "五河县",
      //     value: 1,
      //     entities: 1045,
      //   },
      //   {
      //     province: "安徽省",
      //     city: "蚌埠市",
      //     county: "禹会区",
      //     value: 1,
      //     entities: 51,
      //   },
      // ];
      // 从地图数据中获取区域坐标
      const getGeoCoordFromMap = (areaName) => {
        try {
          const map = echarts.getMap("china");
          if (!map || !map.geoJson || !map.geoJson.features) return null;

          // 在geoJson中查找匹配的区域
          const features = map.geoJson.features;
          for (const feature of features) {
            const properties = feature.properties;
            console.log("检查区域:", properties.name);
            if (properties && properties.name === areaName) {
              // 返回中心点坐标
              console.log(
                "匹配到区域:",
                properties.name,
                properties.centroid ||
                  (properties.cp ? [properties.cp[0], properties.cp[1]] : null)
              );
              return (
                properties.centroid ||
                (properties.cp ? [properties.cp[0], properties.cp[1]] : null)
              );
            }
          }
          return null;
        } catch (error) {
          console.error("获取地理坐标失败:", error);
          return null;
        }
      };

      // 备用坐标映射（当从地图数据中无法获取时使用）
      const backupCoords = {
        // 安徽城市坐标
        安庆市: [117.0543, 30.5201],
        蚌埠市: [117.3872, 32.9361],
        合肥市: [117.29, 31.86],
        芜湖市: [118.3872, 31.3361],
        马鞍山市: [118.48, 31.68],
        淮北市: [116.89, 33.97],
        铜陵市: [117.82, 30.93],
        黄山市: [118.31, 29.71],
        滁州市: [118.31, 32.31],
        阜阳市: [115.81, 32.89],
        宿州市: [116.98, 33.63],
        巢湖市: [117.87, 31.62],
        六安市: [116.5, 31.75],
        亳州市: [115.78, 33.86],
        池州市: [117.49, 30.66],
        宣城市: [118.75, 30.95],
      };

      // 获取备用坐标  可以根据需要修改默认坐标
      const getBackupCoord = (cityName) => {
        // 优先返回城市坐标
        if (backupCoords[cityName]) {
          return backupCoords[cityName];
        }
        // 如果没有城市坐标，返回默认坐标（合肥）
        return backupCoords["合肥市"] || [117.29, 31.86];
      };

      // 处理数据，添加坐标信息
      const processedData = rawData.map((item) => {
        // 先尝试用区县名匹配
        let coord = getGeoCoordFromMap(item.countyName);

        // 如果区县名匹配不到，尝试用城市名
        if (!coord) {
          coord = getGeoCoordFromMap(item.cityName);
        }

        // 如果还匹配不到，使用备用坐标
        if (!coord) {
          coord = getBackupCoord(item.cityName);
        }

        // 返回echarts散点图所需的格式 [经度, 纬度, 服务次数, 地区名称]
        return [
          coord[0],
          coord[1],
          item.entityCount, // 使用entityCount作为服务次数
          `${item.provinceName}${item.cityName}${item.countyName}`,
        ];
      });

      return processedData;
    },
  },
};
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body,
html,
#app {
  height: 100%;
  overflow: hidden;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  background: url("../../assets/dec/bg.png") repeat;
  background-color: #0c1e3e;
}

/* 参考样式 - 添加全局装饰元素 */
body::before {
  position: absolute;
  top: 7.6%;
  right: 0;
  width: 5.2%;
  height: 12%;
  background: url("../../assets/dec/bg-circle.png") no-repeat;
  background-size: 100%;
  content: "";
  z-index: 1000;
}

.el-container {
  height: 100vh;
  background: url("../../assets/dec/bg1_1.png") no-repeat top center;
  background-size: cover;
  position: relative;
}

.el-container::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    to bottom,
    rgba(12, 30, 62, 0.8),
    rgba(12, 30, 62, 1)
  );
  z-index: -1;
}

/* 参考样式 - 添加主容器装饰 */
.home-container {
  position: relative;
}

.home-container::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url("../../assets/dec/bg@2x.png") no-repeat center;
  background-size: contain;
  opacity: 0.05;
  z-index: -2;
}

/* 卡片样式优化 */
.custom-card {
  background: linear-gradient(
    135deg,
    rgba(15, 38, 71, 0.9),
    rgba(15, 38, 71, 0.7)
  );
  border: 1px solid rgba(90, 200, 250, 0.2);
  border-radius: 8px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  transition: all 0.3s ease;
}

.glow-card:hover {
  box-shadow: 0 6px 25px rgba(90, 200, 250, 0.3);
  border-color: rgba(90, 200, 250, 0.4);
  transform: translateY(-2px);
}

.custom-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url("../../assets/bg/bg.png") repeat;
  opacity: 0.1;
  z-index: -1;
}

.card-header {
  background: linear-gradient(
    90deg,
    rgba(24, 55, 101, 0.9),
    rgba(24, 55, 101, 0.7)
  );
  padding: 12px 15px;
  border-bottom: 1px solid rgba(30, 77, 133, 0.5);
  position: relative;
  display: flex;
  align-items: center;
}

.card-header::before {
  content: "";
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  background: url("../../assets/icons/point.png") no-repeat center;
  background-size: contain;
}

.card-header::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, transparent, #1e4d85, transparent);
}

.card-title {
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  margin-left: 25px;
  text-shadow: 0 0 10px rgba(90, 200, 250, 0.5);
}

.chart-container {
  position: relative;
  border-radius: 4px;
  overflow: hidden;
}

.chart-container::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url("../../assets/dec/bor1_1.png") no-repeat center center;
  background-size: contain;
  opacity: 0.1;
  pointer-events: none;
  z-index: -1;
}

.service-list {
  max-height: 280px;
  overflow-y: auto;
  padding: 10px;
  display: flex;
  flex-direction: column;
}

.service-item {
  display: flex;
  align-items: flex-start;
  padding: 12px 15px;
  margin-bottom: 10px;
  background: linear-gradient(
    90deg,
    rgba(24, 55, 101, 0.7),
    rgba(24, 55, 101, 0.5)
  );
  border-radius: 6px;
  border: 1px solid rgba(30, 77, 133, 0.5);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}

.service-item:hover {
  background: linear-gradient(
    90deg,
    rgba(24, 55, 101, 0.9),
    rgba(24, 55, 101, 0.7)
  );
  border-color: rgba(90, 200, 250, 0.5);
  transform: translateX(3px);
  box-shadow: 0 3px 12px rgba(90, 200, 250, 0.2);
}

.service-item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 3px;
  height: 100%;
  background: linear-gradient(to bottom, #5ac8fa, #007aff);
}

.service-text {
  flex: 1;
  padding-left: 8px;
}

.service-title {
  color: #fff;
  font-size: 14px;
  margin-bottom: 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 500;
}

.service-date {
  color: #8aa4ce;
  font-size: 12px;
}

.status-badge {
  margin-right: 10px;
}

.hot-resources {
  max-height: 300px;
  overflow-y: auto;
  padding: 10px;
  display: flex;
  flex-direction: column;
}

.resource-item {
  display: flex;
  align-items: center;
  padding: 12px 15px;
  margin-bottom: 10px;
  background: linear-gradient(
    90deg,
    rgba(24, 55, 101, 0.7),
    rgba(24, 55, 101, 0.5)
  );
  border-radius: 6px;
  border: 1px solid rgba(30, 77, 133, 0.5);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}

.resource-item:hover {
  background: linear-gradient(
    90deg,
    rgba(24, 55, 101, 0.9),
    rgba(24, 55, 101, 0.7)
  );
  border-color: rgba(90, 200, 250, 0.5);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(90, 200, 250, 0.15);
}

.resource-rank {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background: linear-gradient(135deg, #5ac8fa, #007aff);
  color: #fff;
  border-radius: 50%;
  font-size: 12px;
  font-weight: bold;
  margin-right: 12px;
  flex-shrink: 0;
}

.resource-image {
  width: 70px;
  height: 70px;
  border-radius: 6px;
  margin-right: 12px;
  object-fit: cover;
  border: 1px solid rgba(30, 77, 133, 0.5);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  flex-shrink: 0;
}

.resource-info {
  flex: 1;
}

.resource-name {
  color: #fff;
  font-size: 14px;
  margin-bottom: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 500;
}

.resource-type {
  color: #8aa4ce;
  font-size: 12px;
  margin-bottom: 6px;
}

.resource-count {
  color: #5ac8fa;
  font-size: 12px;
  font-weight: 500;
  display: flex;
  align-items: center;
}

.resource-count::before {
  content: "";
  display: inline-block;
  width: 12px;
  height: 12px;
  background: url("../../assets/icons/point.png") no-repeat center;
  background-size: contain;
  margin-right: 5px;
}

/* 标题图片样式 */
.title-icon {
  display: inline-block;
  width: 24px;
  height: 24px;
  background: url("../../assets/dec/title1.png") no-repeat center;
  background-size: contain;
  vertical-align: middle;
  margin-right: 8px;
}

.title-icon-2 {
  background: url("../../assets/dec/title2.png") no-repeat center;
  background-size: contain;
}

/* 美化滚动条 */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: rgba(12, 30, 62, 0.5);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(
    to bottom,
    rgba(0, 187, 236, 0.7),
    rgba(90, 200, 250, 0.7)
  );
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(
    to bottom,
    rgba(0, 187, 236, 0.9),
    rgba(90, 200, 250, 0.9)
  );
}

/* 装饰性的发光效果 */
.glow-effect {
  position: relative;
}

.glow-effect::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(
    circle at center,
    rgba(90, 200, 250, 0.15) 0%,
    transparent 70%
  );
  pointer-events: none;
}

/* 响应式调整 */
@media (max-width: 1200px) {
  .el-col {
    margin-bottom: 15px;
  }
}

@media (max-width: 768px) {
  .el-main {
    padding: 5px;
  }

  .el-row {
    margin: 0;
  }

  .el-col {
    width: 100%;
    margin-bottom: 15px;
  }

  .card-title {
    font-size: 14px;
  }
}
</style>
